<template>
  <div class="statistic">

    <cube-scroll ref="scroll" :style="{height:page_height+'px'}" :options="scroll_options" @pulling-up="upGetList">
      <!--S投放中的卡券数量-->
      <div id="puting">
        <h2>投放中的卡券数量</h2>
        <h3>{{put_total}}</h3>
      </div>
      <!--E投放中的卡券数量-->

      <!--S今日、昨日、总发放，近期发放-->
      <div id="recent">
        <cube-tab-bar class="recent-tab" v-model="recent.tab_value" :data="recent.tab_data" :showSlider="true"></cube-tab-bar>
        <ul>
          <li>
            {{recent.tab_data[recent.tab_value].give}}<br />
            <span>发券</span>
          </li>
          <li>
              {{recent.tab_data[recent.tab_value].after}}<br />
            <span>核销</span>
          </li>
        </ul>
      </div>
      <!--E今日、昨日、总发放，近期发放-->

      <!--S统计图-->
      <div id="echarts">
        <div class="select-date">
          <cube-button class="button" :inline="true" :primary="statistic.selected_week" @click="clickWeek">近7日</cube-button>
          <cube-button class="button" :inline="true" :primary="statistic.selected_month" @click="clickMonth">近30日</cube-button>
        </div>

        <div class="select-time">
          <cube-button class="button" :inline="true" @click="clickStartDate">{{str_start_date}}</cube-button>
          <span>到</span>
          <cube-button class="button" :inline="true" @click="clickEndDate">{{str_end_date}}</cube-button>
        </div>

         <div class="echarts" ref="echarts"></div>
      </div>
      <!--E统计图-->

      <div id="list">
        <h2>数据详情</h2>
        <ul>
          <li>
            <span>日期</span>
            <span>发券</span>
            <span>核销</span>
            <span>累计发券</span>
            <span>累计核销</span>
          </li>
          <li v-for="item in list.data">
            <span>{{item.time}}</span>
            <span>{{item.give}}</span>
            <span>{{item.after}}</span>
            <span>{{item.addup_give}}</span>
            <span>{{item.addup_after}}</span>
          </li>
        </ul>
      </div>
    </cube-scroll>

  </div>
</template>

<script>
import store from '../../store.js';
import common from '../../public/common.js';
import echarts from  'echarts/dist/echarts.min.js';
export default {
  name: 'statistic',   //统计
  data(){
    return {
      page_height:store.state.height,
      store_id:0,  //门店id
      create_time:0,  //门端创建的时间戳
      put_total:0,  //投放中的卡券数量
      recent:{   //近期发放的数据
        tab_value:0,
        tab_data:[
          {
            label:'今日',
            value:0,
            give:0,   //发放
            after:0   //核销
          },
          {
            label:'昨日',
            value:1,
            give:0,   //发放
            after:0   //核销
          },
          {
            label:'总数',
            value:2,
            give:0,   //发放
            after:0   //核销
          }
        ]
      },
      echarts:{
        echarts:null,   //统计表对象
      },
      statistic:{
        selected_week:true,
        selected_month:false,
        start_date:common.getNearDate(-6),
        end_date:common.getNearDate(0),
        start_date_module:null,
        end_date_module:null
      },
      list:{
        limit:[parseInt(common.getNearDate(0).getTime()/1000),20],
        data:[]
      },
      scroll_options:{   //页面滚动参数
        pullUpLoad:{
          txt:{
            more:'上拉加载更多',
            noMore:'----我也是有底线的----'
          },
        },
        scrollbar:true
      }
    }
  },
  computed:{
    //字符串开始时间
    str_start_date(){
      return common.timeFormat(this.statistic.start_date);
    },
    //字符串结束时间
    str_end_date(){
      return common.timeFormat(this.statistic.end_date);
    },
    //开始时间大到结束时间的数组
    start_end_date(){
      var array = [];
      var start_time = this.statistic.start_date;
      var day = (this.statistic.end_date.getTime() - start_time.getTime()) / 86400000;
      var i=0;
     while (i<=day){
        array.push(start_time.getTime()+(86400000*i));
        i++;
      }
      return array;
    }
  },
  created(){
    common.store()
            .then((res)=>{
              if(store.state.store.position_id != 0){
                if(!store.state.store.authority.includes('statistic')){
                  this.$router.replace('/');
                  return;
                }
              }
              if(res){
                this.store_id = res.store_id;
                this.create_time = res.create_time;
              }
            })
            .then(()=>{
                //加载投放卡券的总数
                this.putTotal();
            })
            .then(()=>{
                //近期的数据，今日，昨日、总数
                this.recentData();
            })
            .then(()=>{
                //加载统计图
                this.loadEcharts();
                this.drawStatisticData();
            })
            .then(()=>{
                //获取列表
                this.getList();
            })
            .catch(error=>console.log(error));
  },
  mounted(){
    this.$nextTick(()=>{
      setTimeout(()=>{
        this.page_height = document.documentElement.clientHeight;
      },100);
    });
  },
  methods:{
      //加载统计图
      loadEcharts(){
          this.echarts.echarts = echarts.init(this.$refs.echarts);
          var option = {
              tooltip: {show:false},
              legend: {
                  data:['发券','核销'],
              },
              xAxis: {
                  data:this.start_end_date,
                  axisLabel:{
                      interval:this.start_end_date.length < 10 ? 0 : parseInt(this.start_end_date.length/10),
                      rotate:20,
                      fontSize:10,
                      formatter:function(value){
                        var date = new Date(parseInt(value));
                        return date.getMonth()+1 +'/'+date.getDate();
                        common.timeFormat()
                      }
                  }
              },
              yAxis: {
                minInterval:1
              },
              series: [
                  {
                      name: '发券',
                      type: 'line',
                      data: [5, 20, 36, 10, 10, 20,4]
                  },
                  {
                      name: '核销',
                      type: 'line',
                      data: [1, 3, 6, 4, 78, 43,43]
                  }
              ],
              color:['#FC9153','blueviolet']
          };
          this.echarts.echarts.setOption(option);
      },
      //加载投放总数
      putTotal(){
          return new Promise((success)=>{
              this.$http.post(sysinfo.url,Qs.stringify({
                  pages:'activityCoupon',
                  doing:'putCouponTotal',
                  store_id:this.store_id
              }))
                  .then((res)=>{
                      if(res.data.status == 'success'){
                          this.put_total = res.data.data;
                          success()
                      }
                  })
                  .catch(error=>console.log(error));
          });
      },
      //加载近期的卡券数据(今天、昨天、总数)
      recentData(){
          return new Promise((success)=>{
              this.$http.post(sysinfo.url,Qs.stringify({
                  pages:'couponStatistic',
                  doing:'recentData',
                  store_id:this.store_id
              }))
                  .then((res)=>{
                      if(res.data.status == 'success'){
                          var data = res.data.data;
                          this.recent.tab_data[0].after = data.today.after;
                          this.recent.tab_data[0].give = data.today.give;
                          this.recent.tab_data[1].after = data.yesterday.after;
                          this.recent.tab_data[1].give = data.yesterday.give;
                          this.recent.tab_data[2].after = data.total.after;
                          this.recent.tab_data[2].give = data.total.give;
                      }
                  })
                  .catch(error=>console.log(error));
          });
      },
      //获取列表
      getList(){
        this.$http.post(sysinfo.url,Qs.stringify({
          pages:'couponStatistic',
          doing:'getList',
          store_id:this.store_id,
          limit:this.list.limit,
          create_time:this.create_time
        }))
                .then((res)=>{
                  if(res.data.status == 'success'){
                    this.list.data.push(...res.data.data);
                    this.list.limit[0] = parseInt(common.getNearDate(-this.list.limit[1]).getTime()/1000);
                    this.list.limit[1] += this.list.limit[1];
                    this.$refs.scroll.forceUpdate(true,true);
                  }else{
                    this.$refs.scroll.forceUpdate(false,false);
                  }
                  this.$nextTick(()=>{
                    this.$refs.scroll.refresh();
                  });
                })
                .catch(error=>console.log(error));
      },

      //点击进7日
      clickWeek(){
        this.statistic.selected_week = true;
        this.statistic.selected_month = false;
        this.statistic.start_date = common.getNearDate(-7);
        this.drawStatisticData();
      },
      //点击进一月
      clickMonth(){
        this.statistic.selected_week = false;
        this.statistic.selected_month = true;
        this.statistic.start_date = common.getNearDate(-30);
        this.drawStatisticData();
      },
      //点击开始时间
      clickStartDate(){
        if(!this.statistic.start_date_module){
          this.statistic.start_date_module = this.$createDatePicker({
            title: '选择日期',
            min: new Date('2019-10-10'),
            max: new Date(),
            value: this.statistic.start_date,
            zIndex:400,
            onSelect:(res)=>{
              this.statistic.selected_week = false;
              this.statistic.selected_month = false;
              this.statistic.start_date = res;
              this.drawStatisticData();
            }
          });
        }
        this.statistic.start_date_module.show();
      },
      //点击结束时间
      clickEndDate(){
        if(!this.statistic.end_date_module){
          this.statistic.end_date_module = this.$createDatePicker({
            title: '选择日期',
            min: new Date(2008, 7, 8),
            max: new Date(),
            value: this.statistic.end_date,
            zIndex:400,
            onSelect:(res)=>{
              this.statistic.selected_week = false;
              this.statistic.selected_month = false;
              this.statistic.end_date = res;
              this.drawStatisticData();
            }
          });
        }
        this.statistic.end_date_module.show();
      },
      //重绘统计表数据
      drawStatisticData(){
        var option = {
          xAxis: {
            data:this.start_end_date,
            axisLabel:{
              interval:this.start_end_date.length < 10 ? 0 : parseInt(this.start_end_date.length/10),
              rotate:20,
              fontSize:10,
              formatter:function(value){
                var date = new Date(parseInt(value));
                return date.getMonth()+1 +'/'+date.getDate();
              }
            }
          }
        }
        this.getStartEndData()
                .then((data)=>{
                  option.series = [
                    {
                      name: '发券',
                      type: 'line',
                      data: data.give
                    },
                    {
                      name: '核销',
                      type: 'line',
                      data: data.after
                    }
                  ]
                  this.echarts.echarts.setOption(option);
                })
                .catch(error=>console.log(error));
      },
      //请求时间段的核销数量和发券数量数据
      getStartEndData(){
        return new Promise((success)=>{
          this.$http.post(sysinfo.url,Qs.stringify({
            pages:'couponStatistic',
            doing:'startEndData',
            store_id:this.store_id,
            limit:[parseInt(this.start_end_date[0]/1000),parseInt(this.start_end_date[this.start_end_date.length-1]/1000)]
          }))
                  .then((res)=>{
                    if(res.data.status == 'success'){
                      success(res.data.data);
                    }
                  })
                  .catch(error=>console.log(error));
        });
      },
      //上拉加载
      upGetList(){
        this.getList();
      }
  }
}
</script>

<style scoped>
  .statistic{
    background: #eee;
  }
  #puting{
    width:100%;
    height:120px;
    background: #fff;
    padding:10px 10px 0 10px;
    margin-bottom: 5px;
    box-sizing: border-box;
  }
  #puting h2{
    height:20px;
    font-size:20px;
  }
  #puting h3{
    text-align: center;
    height:75px;
    line-height: 75px;
    font-size: 19px;
  }
  #recent{
   background: #fff;
   height:150px;
   margin-bottom: 5px;
  }
  #recent .recent-tab{
    height:50px;
    font-size:16px;
    border-bottom: 1px solid #eee;
  }
  #recent ul{
    width: 100%;
    height:100px;
    display: flex;
    display: -webkit-box;
  }
  #recent ul li{
    flex-grow:1;
    -webkit-box-flex:1;
    text-align: center;
    height:100px;
    font-size:16px;
    padding-top:35px;
    box-sizing: border-box;
  }
  #echarts{
    width: 100%;
    height:280px;
    padding:10px 10px 0 10px;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 5px;
  }
  #echarts .select-date .button{
    margin-right:5px;
  }
  #echarts .select-time{
    margin-top: 10px;
    margin-bottom: 10px;
    height:32px;
  }
  #echarts .select-time .button{
    width:150px;
    float: left;
  }
  #echarts .select-time .button:nth-of-type(2){
    float:right;
  }
  #echarts .select-time span{
    width: 55px;
    height:32px;
    line-height: 32px;
    font-size: 16px;
    color:#666;
    display: inline-block;
    text-align: center;
  }
  #echarts .echarts{
    height:220px;
  }
  #list{
    background: #fff;
    box-sizing: border-box;
    font-size:14px;
  }
  #list h2{
    height:40px;
    padding:0 10px;
    line-height: 40px;
    font-size:16px;
  }
  #list ul li{
    display: -webkit-box;
    display: flex;
    justify-content:flex-start;
    height:40px;
    line-height: 40px;
    padding:0 10px;
  }
  #list ul li span{
    display: block;
    flex-grow:1;
    width:0;
    -webkit-box-flex:1;
    margin:auto;
  }
  #list ul li:nth-of-type(2n){
    background: #ddd;
  }
</style>
